<template>
  <div id="fileType" style="width: 100%; padding-left: 100px">
    <el-tabs style="font-size: 20px; font-palette: dark" @tab-click="checkout">
      <div style="margin-top: 10px">
        <el-button icon="el-icon-plus" size="small" type="primary" @click="add()">添加</el-button>
      </div>
      <el-tab-pane v-for="file in fileList" :key="file.id" style="margin-top: 15px">
        <span class="tab-slot" slot="label">{{ file.name }}</span>
        <el-table :data="fileKindList" style="width: 70%">
          <el-table-column prop="fileType" label="类型"></el-table-column>
          <el-table-column prop="operatorName" label="操作人">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
          <el-table-column prop="modifyTime" label="更新时间">
          </el-table-column>
          <el-table-column prop="city" label="操作" width="200">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" size="small" type="success" @click="update(scope.row)">编 辑</el-button>
              <el-button icon="el-icon-delete" size="small" type="danger" @click="deleteOne(scope.row)">删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="show" :title="title" style="text-align: left; margin-left: 25%; width: 50%;"
               @closed="show = false"  :center="true">
      <el-form v-model="rowType">
        <el-form-item label="类型:" :label-width="formLabelWidth">
          <el-input v-model="rowType.fileType" style="width: 80%; margin-right: 20px"></el-input>
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input v-model="rowType.remark" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="show = false" style="margin-right: 20px">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate()" style="margin-left: 20px">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "fileType",
  data() {
    return {
      fileList: [],
      fileKindList: [],
      kind: 'photo',
      title: '',
      name: '图  片',
      formLabelWidth: '80px',
      rowType: {},
      show: false,
      currentFile: {}
    }
  },
  created() {
    this.getFileList();
  },
  methods: {
    deleteOne(param){
      this.$axios.post("/file-type/delete",{
        "id": param.id
      }).then(res=>{
        if(res.data.code === '200'){
          this.$message.success("删除成功");
        }else {
          this.$message.error(res.data.message);
        }
        this.getFileKindList(this.kind);
      })
    },
    update(param) {
      this.title = '编 辑';
      this.rowType = param;
      this.show = true;
    },
    add() {
      this.title = '新 增';
      this.show = true;
      this.rowType = {};
    },
    checkout(e) {
      this.currentFile = this.fileList[e.index];
      this.name = this.fileList[e.index].name;
      this.getFileKindList(this.currentFile.kind);
    },
    saveOrUpdate() {
      this.show = false;
      let id = this.rowType.id;
      this.$axios.post("/file-type/saveorupdate", {
        id: id,
        kind: this.kind,
        fileType: this.rowType.fileType,
        enable: this.rowType.enable,
        remark: this.rowType.remark,
        name: this.name
      }).then(res => {
          if (res.data.code === '200') {
            if (id === '' || id === null || id === undefined) {
              this.$message.success("新增成功");
            } else {
              this.$message.success("修改成功");
            }
          } else {
            this.$message.error(res.data.message);
          }
          this.getFileKindList(this.kind);
        }
      )
    },
    getFileList() {
      this.$axios.post("/file-type/type/page", {}).then(res => {
        if (res.data.code === '200') {
          this.fileList = res.data.data;
          this.kind = this.fileList[0].kind;
          this.getFileKindList(this.kind);
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    getFileKindList(param) {
      this.$axios.post("/file-type/type/list", {
        kind: param
      }).then(res => {
        if (res.data.code === '200') {
          this.fileKindList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>

<style scoped>
.tab-slot {
  padding: 0 20px;
}

/deep/ .el-dialog__header {
  border-bottom: 1px solid #EEE;
}

/deep/ .el-tabs__item {
  padding: 0;
}
</style>
